<template>
  <div class="h-full">
    <div class="h-12 p-4 border-b-1 border-[#ebebeb] font-medium base-font-85"> 图表配置 </div>
    <div class="p-4" :style="{ height: 'calc(100% - 100px)' }">
      <ScrollContainer class=""
        ><BasicForm @register="registerForm">
          <template #colorPickerSlot="{ model, field }">
            <ColorPicker v-model="model[field]" />
          </template>
          <template #deleteSlot="{ field }">
            <a-button type="link" danger @click="handleDelete(field)">删除</a-button>
          </template>
        </BasicForm></ScrollContainer
      >
    </div>

    <div
      class="h-12.5 p-4 flex justify-end items-center"
      style="box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.1)"
    >
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import ColorPicker from '/@/components/ColorPicker/main.vue';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import { widgetsChartSchemas } from '/@/views/thingsborad/dashboards/components/ConfigureDashboard/components/modalClassify/htmlCard/htmlCard.data';
  import { ref, watchEffect, nextTick } from 'vue';

  import { ScrollContainer } from '/@/components/Container';
  const props = defineProps({
    whereFrom: { type: String },
    formData: {
      type: Object,
    },
  });

  const emits = defineEmits(['success']);

  const [
    registerForm,
    { validate, setFieldsValue, appendSchemaByField, removeSchemaByField, resetSchema },
  ] = useForm({
    layout: 'vertical',
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  watchEffect(async () => {
    //此处初始两次 TODO
    await nextTick();
    if (props.whereFrom && props.whereFrom == 'widgetsLibrary') {
      resetSchema(widgetsChartSchemas);
      if (props.formData) {
        setFieldsValue({
          ...props.formData,
        });
      }
    }
  });

  // 添加series项
  // function handleAdd() {
  //   appendSchemaByField(getAddSchemas(seriesLength.value), '');
  //   seriesLength.value += 1;
  // }
  // 删除series项
  function handleDelete(field: string) {
    removeSchemaByField([
      `series.${Number(field)}.key`,
      `series.${Number(field)}.name`,
      `series.${Number(field)}.color`,
      `${Number(field)}`,
    ]);
  }

  async function handleSubmit() {
    // const formData = await validate();
    let obj = await validate();

    const formData = {
      datasources: [
        {
          type: 'static',
          name: 'function',
          dataKeys: [
            {
              name: 'f(x)',
              type: 'function',
              label: 'Random',
              color: '#2196f3',
              settings: {},
              _hash: 0.15479322438769105,
              funcBody:
                'var value = prevValue + Math.random() * 100 - 50;nvar multiplier = Math.pow(10, 2 || 0);nvar value = Math.round(value * multiplier) / multiplier;nif (value < -1000) {ntvalue = -1000;n} else if (value > 1000) {ntvalue = 1000;n}nreturn value;',
            },
          ],
        },
      ],
      timewindow: {
        realtime: {
          timewindowMs: 60000,
        },
      },
      showTitle: obj.showTitle,
      backgroundColor: obj.backgroundColor,
      color: obj.color,
      padding: '8px',
      settings: {
        cardHtml: "<div class='card'>HTML code here</div>",
        cardCss:
          '.card {n    font-weight: bold;n    font-size: 32px;n    color: #999;n    width: 100%;n    height: 100%;n    display: flex;n    align-items: center;n    justify-content: center;n}',
      },
      title: obj.title,
      dropShadow: true,
      showTitleIcon: false,
      titleTooltip: obj.titleTooltip,
      enableFullscreen: true,
      widgetStyle: {},
      widgetCss: '',
      titleStyle: {
        fontSize: '16px',
        fontWeight: 400,
      },
      pageSize: 1024,
      noDataDisplayMessage: '',
    };

    emits('success', formData);
    // closeModal();
  }
</script>
<style lang="less" scoped>
  :deep(.scrollbar__thumb) {
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }
</style>
